<template>
  <!-- html -->
  <!-- <div>2</div> -->
  <div>
    <div @click="go">{{ abc }}</div>
    <button>{{ abc }}</button>
    计数：
    <div>{{ count }}</div>
    <div>{{ countMsg }}</div>
    <button @click="incre">点击改变</button>
    <div>{{ people }}</div>
    <input placeholder="姓名" v-model="person.name" />
    <input placeholder="年龄" v-model="person.age" />
    <button @click="add">添加</button>
    <child-first></child-first>
  </div>
</template>
<script>
// js
import ChildFirst from '@/components/ChildFirst.vue'
export default {
  name: 'Prac3View',
  components:{
    ChildFirst:ChildFirst
  },
  //   声明页面变量
  data() {
    return {
      abc: 1233,
      count: 85,
      people: [
        { name: 'zhangsan', age: 10 },
        { name: 'lisi', age: 11 }
      ],
      person: {
        name: 'wangwu5',
        age: '60'
      }
    }
  },
  computed: {
    countMsg() {
      if (this.count < 100) return '需要继续点击'
      else return '可以停下来了'
    }
  },
  //   生命周期 钩子函数
  created() {
    console.log('自动运行的 created 函数')
  },
  mounted() {
    console.log('自动运行的 mounted函数')
  },
  //   声明方法体的地方
  methods: {
    go() {
      console.log(this.abc)
    },
    incre() {
      // console.log("====")
      this.count = this.count + 2
    },
    add() {
      // console.log(this.person)
      this.people.push({
        name: this.person.name,
        age: this.person.age
      })
    }
  },
  watch: {
    // sampleP(n, o) {},
    count(n, o) {
      console.log('count', n)
      if (this.count > 90) {
        console.log('花名册人满了')
      }
    },
    // 对于数组等复杂对象往往开启深度监听
    // people(n, o) {
    //   console.log('people', n)
    // },
    people: {
      handler: (n, o) => {
        console.log('people', n)
      },
      deep: true
    }
  }
}
</script>
<style>
/* css */
</style>
